<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="com.google.appengine.api.users.User" %>
<%@ page import="com.google.appengine.api.users.UserService" %>
<%@ page import="com.google.appengine.api.users.UserServiceFactory" %>

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xn="http://www.renren.com/2009/xnml">
<head>
<script type="text/javascript" src="http://static.connect.renren.com/js/v1.0/FeatureLoader.jsp"></script>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true_or_false&amp;key=ABQIAAAAelbhwzvnvfKVKgmsyQcbAxTOa2_st-1Hs28TKXR8rCrx5JW4JRQbm0OW-y1MUgHxDvAKI-GBKCLK5g&hl=zh-CN&sensor=false" type="text/javascript"></script> 
<link type="text/css" rel="stylesheet" href="../css/module.css"  media="all" />


<style>
* { padding:0; margin:0;}
img { border:0;}
a,img {
    star:expression(this.onFocus=this.blur()); 
 outline:none;
}
a {
 color:#025521; 
 text-decoration:none;
}
a:hover { 
 color:#009900;
}
table { 
 border-collapse:collapse;
 border:0;
 width:auto;
 table-layout:fixed;
}
caption,th {text-align:left;}
td, th {
 vertical-align:top;
 word-break: break-word;
 word-wrap: break-word;
}
td, th, x:-moz-any-link {
 overflow:hidden; 
}
/* end header */
/* datatable */
/* .datatable table, x:-moz-any-link { width:100%;} */
.datatable table{
 /*width:100%;*/
 color:#025521;
}
.datatable table thead th{
 background-color:#6c9786;
 border-bottom:1px solid #e6f3d7;
 font-weight:bold;
 color:#fff;
 text-align:left;
 padding:6px 4px;
}
.datatable table tbody tr td { 
 border-bottom:1px solid #cfe2d6;
 background-color:#fff;
 padding:6px 4px;
 table-layout:fixed;
 word-break: break-word;
 word-wrap: break-word;
 vertical-align:top;
}
.datatable table tbody tr td, x:-moz-any-link {overflow:hidden; }
.wrap {
 table-layout:fixed;
 word-break: break-word;
 word-wrap: break-word; 
}
.wrap, x:-moz-any-link {
 overflow:hidden;
}
.datatable table tbody tr.even td{
 background-color:#fafafa;
}
.datatable table tbody tr.on td {
 background-color:#ebf9c3;
 border-bottom:1px solid #409f00;
}
.datatable table tbody tr td a.play, .datatable table tbody tr td a.stop {
 background-image: url(../images/sound_icon.gif);
 background-repeat: no-repeat;
 background-position: 34px 0px;
 display:block;
 height:12px;
 font-style:normal;
}
.datatable table tbody tr td a.stop { background-position: 34px -12px;}
.datatable table tbody tr.selected td {
 background-color:#eee;
 color:#bbb;
}
.datatable .selected a, .datatable .selected a:hover { color:#bbb;}
.datatable table thead th a, .datatable table thead th a:hover {
 color:#fff;
 text-decoration:none;
}
.datatable table tbody th { 
 font-weight:bold;
 text-align:left;
 background-color:#fff;
 border-bottom:1px solid #cfe2d6; 
}
.datatabletable table.second_layout tbody tr td{
 background-color:#EBF1ED;
}
.datatable table.second_layout tbody tr th{
 font-weight:normal;
 padding-left:18px;
 background-color:#EBF1ED;
}
.datatable table tbody tr.prompt td { background-color:#E6E6E6; color:#BCBCBC;}
.datatable table tbody tr.prompt th { background-color:#E6E6E6; color:#BCBCBC;}
.datatable table.first_layout tbody tr td, .datatable table.first_layout tbody tr th { border-bottom: none;}
/* end datatable */
/* scrolltable */
#fixedscrolling {
    height:226px;
 margin:10px;
}
.scrolltable  {
    height:300px; /* set height here for ie */ 
 overflow-y: auto;
}
.scrolltable tbody {
    height:300px; /* set height here for non-ie */
    *height:auto; /* for ie */
 display: block;
 overflow: auto;
}
.scrolltable  thead {   
 display:block;
 background-color:#6C9786;  /* firefox needs a background color */
}
.scrolltable thead tr {
 position: relative;
}
/* end scrolltable */
/* pageDivide */
.pageDivide{
         margin:10px auto 0 auto;
}
.total{
         float:left;
         width:100px;
   margin-top:4px;
}
.pageNum{
         float:right;
}
.pageNum div{
         float:left;
         padding:0 3px;
         width:auto;
}
.pageNum {
         font-weight:bold;
         color:#409f00;
         font-size:12px;
}
.pageNum span {
         font-weight:normal;
         color:#409f00;
         font-size:12px;
         float:left;
         padding:2px 4px;
         margin:3px;
         font-weight:bold;
}
.pageNum a{ 
         border:1px solid #cfe2d6;
         font-weight:normal; 
         background-color:#fff;
         font-size:12px;
         margin:3px;
         display:block;
         float:left;
         padding:2px 4px;
}
.pageNum a:hover { 
         border:1px solid #409f00; 
         background-color:#ebf9c3;
}
.pageNum input { width:30px; height:14px; float:left;}
</style>

</head>
  <body onLoad="initialize()" onUnload="GUnload()"> 

<script type="text/javascript"> 
 var map;
 var JJJmarker;
    function initialize() {
      if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(30.586204, 103.521574), 13);
        map.setZoom(5);
/*	geoXml = new GGeoXml("http://jjjabc123.appspot.com/dyxc.kml");
	map.addOverlay(geoXml);*/
      }
    }
    // addAddressToMap() is called when the geocoder returns an
    // answer.  It adds a marker to the map with an open info window
    // showing the nicely formatted version of the address and the country code.
    function addAddressToMap(response) {
      map.clearOverlays();
      if (!response || response.Status.code != 200) {
        alert("Sorry, we were unable to geocode that address");
      } else {
        place = response.Placemark[0];
        point = new GLatLng(place.Point.coordinates[1],
                            place.Point.coordinates[0]);
        marker = new GMarker(point);
        map.addOverlay(marker);
        marker.openInfoWindowHtml(place.address + '<br>' +
          '<b>Country code:</b> ' + place.AddressDetails.Country.CountryNameCode);
      }
    }
 
    // showLocation() is called when you click on the Search button
    // in the form.  It geocodes the address entered into the form
    // and adds a marker to the map at that location.
    function showLocation() {
      var address = document.forms[0].q.value;
      geocoder.getLocations(address, addAddressToMap);
    }
 
   // findLocation() is used to enter the sample addresses into the form.
    function findLocation(address) {
      document.forms[0].q.value = address;
      showLocation();
    }
	
	var JJJtinyurl
	var JJJaddress
	var JJJname
	
	function addpoint(point) {
		  if (!point) {
		  } else {
			map.setCenter(point, 5);
			JJJmarker = new GMarker(point);
			map.addOverlay(JJJmarker);
			JJJmarker.openInfoWindowHtml('<img src=\"'+JJJtinyurl+'\">'+JJJname+'<br>'+JJJaddress);
		  }
	}
	  
	var geocoder = new GClientGeocoder();
	
	function showAddress(address) {
	  if(address+'.' == 'undefined.'){
	  	alert(JJJname+'未定义家乡');
	  }else {
	  	geocoder.getLatLng(address,addpoint);
	  }
	}
	
	function addpointOutinfo(point) {
		  if (!point) {
		  } else {
			map.setCenter(point, 5);
			JJJmarker = new GMarker(point);
			map.addOverlay(JJJmarker);
		  }
	}
	
	function addP(address){
	  if(address+'.' == 'undefined.'){
	  }else {
	  	geocoder.getLatLng(address,addpointOutinfo);
	  }
	}
	function JJJshowAddress(address,tinyurl,name,info) {
		JJJaddress = address;
		JJJtinyurl = tinyurl;
		JJJname = name;
		if(info){
			showAddress(address);
		}else{
			addP(address);
		}
	}
	

</script> 
<script type="text/javascript">
	var allfriend;
	function JJJdisAllFriendLoc(){
		if(!allfriend){
			alert("allfriend==NULL");
		}
		for(var i = 0; i < allfriend.length; i++)
             	{
             		JJJshowAddress(allfriend[i].hometown_location.city,allfriend[i].tinyurl,allfriend[i].name,0);
            		};
	}

function add_row(json){
        newRow=document.all.tdcon.insertRow(-1);
        newcell=newRow.insertCell();
        newcell.innerHTML="<a href=\"javascript:void(0)\" onclick=\"JJJshowAddress('"+json.hometown_location.city+"','"+json.tinyurl+"','"+json.name+"',1);return false\">"+json.name+"</a>";

	
}


function disjson(json){
             for(var i = 0; i < json.length; i++)
             {
             	add_row(json[i]);
             }
}

function  clone(jsonObj) {   
    var  buf;   
    if  (jsonObj  instanceof  Array) {   
        buf = [];   
        var  i = jsonObj.length;   
        while  (i--) {   
            buf[i] = clone(jsonObj[i]);   
        }   
        return  buf;   
    }else   if  (jsonObj  instanceof  Object){   
        buf = {};   
        for  ( var  k  in  jsonObj) {   
            buf[k] = clone(jsonObj[k]);   
        }   
        return  buf;   
    }else {   
        return  jsonObj;   
    }   
}  

	function friends_get_callback(result, ex){
		if(ex){
			alert("获取好友列表失败");
		}
		XN.Main.apiClient.users_getInfo(result, ['birthday','name','sex','hometown_location','tinyurl'], function(result, ex) {
		if(ex){
			alert("获取好友信息失败");
		}
			allfriend=clone(result);

      			disjson(result);
    		});
	}
</script> 
 <script type="text/javascript"> 
	function connectedtoXN(){
		XN.Main.apiClient.friends_get(friends_get_callback);
	};

    </script>

	   <div  style="width:auto; height:50px; float:right" id="top">
	   
	   </div>
	   
		<DIV style="WIDTH: 500px; HEIGHT: 500px; float: left;" id=map_canvas>
		</DIV>

		<div id="fixedscrolling" class="datatable scrolltable" style="WIDTH: 200px; HEIGHT: 500px; float:right; ">
			<table  id="xn" style="WIDTH: 180px;font-size:12px;">
			   <thead>
			                <tr>
			                    <th>姓名</th>
			                </tr>
			   </thead>
			   <tbody id="tdcon">
			  
			
			   </tbody>
			   </table>
			   <br>
			<img src="http://code.google.com/appengine/images/appengine-silver-120x30.gif" alt="由 Google App Engine 提供支持" />
			   <a href="javascript:void(0)" onclick="JJJdisAllFriendLoc();return false;"><b>点击我</b></a>
	        </div>

		
	 
	<div class="top123"  style=" clear:both; height:50px" id="down">			   </div>

  <script type="text/javascript">
    XN_RequireFeatures(["EXNML"], function()
    {
	XN.Main.init("171eae3d188244f08d4596263834b25f", "xd_receiver.html");
	XN.Main.get_sessionState().waitUntilReady(connectedtoXN);
    });
</script>
</body> 
</html>

      
